.portia-icon {
    display: inline-block;
    line-height: 1;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: inherit; // can't have font-size inherit on line above, so need to override
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@function encode-leading-hash($string) {
    @if str-slice($string, 1, 1) == '#' {
        $string: '%23' + str-slice($string, 2);
    }
    @return $string;
}

@function portia-spider-icon($foreground-color, $background-color) {
    $foreground-color: encode-leading-hash(unquote($foreground-color));
    $background-color: encode-leading-hash(unquote($background-color));
    @return 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 14"><path fill="' + $foreground-color + '" d="m18.64 8.57l-2.87-4.82c-0.08-0.13-0.23-0.21-0.38-0.21s-0.3 0.08-0.38 0.21l-0.91 1.69-0.27-0.47 0.85-2.24c0.06-0.15 0.2-0.53 0.3-0.86 0.05-0.12 0.08-0.24 0.08-0.38v-0.08-0.02c0-0.77-0.62-1.39-1.39-1.39-0.75 0-1.35 0.59-1.38 1.33-0.26-0.11-0.54-0.17-0.85-0.17-1.29 0-1.95 1.27-1.96 1.29 0-0.02-0.66-1.29-1.95-1.29-0.3 0-0.59 0.06-0.85 0.17-0.02-0.74-0.63-1.33-1.37-1.33-0.77 0-1.39 0.62-1.39 1.39v0.03 0.08c0.01 0.13 0.04 0.26 0.08 0.38 0.1 0.33 0.24 0.71 0.3 0.86l0.85 2.24-0.27 0.46-0.89-1.68c-0.08-0.13-0.22-0.21-0.38-0.21-0.15 0-0.3 0.08-0.38 0.21l-2.87 4.82c-0.08 0.13-0.09 0.3-0.01 0.44l1.2 2.26c-0.01 0.04-0.01 0.08-0.01 0.12 0 0.32 0.26 0.57 0.57 0.57s0.57-0.26 0.57-0.57c0-0.24-0.15-0.45-0.36-0.53l-1.09-2.04 2.31-3.78 0.68 1.54-1.41 2.46c-0.09 0.14-0.09 0.32 0 0.47l1.06 1.71c0 0.03-0.01 0.05-0.01 0.08 0 0.32 0.26 0.57 0.57 0.57 0.32 0 0.57-0.26 0.57-0.57 0-0.26-0.17-0.47-0.39-0.54l-0.92-1.48 1.89-3.02 0.09 0.39c0.39 1.4 0.98 1.93 1.75 1.93 0.45 0 1.15-0.47 1.21-1.41 0.09-1.3 1.58-1.3 1.67 0 0.06 0.93 0.76 1.41 1.21 1.41 0.77 0 1.36-0.54 1.75-1.93 0.04-0.13 0.06-0.26 0.09-0.39l1.89 3.02-0.92 1.48c-0.23 0.08-0.39 0.29-0.39 0.54 0 0.32 0.26 0.57 0.57 0.57 0.32 0 0.57-0.26 0.57-0.57 0-0.03 0-0.05-0.01-0.08l1.06-1.71c0.09-0.14 0.09-0.32 0-0.47l-1.39-2.46 0.68-1.54 2.31 3.78-1.09 2.04c-0.21 0.09-0.36 0.29-0.36 0.53 0 0.32 0.26 0.57 0.57 0.57 0.32 0 0.57-0.26 0.57-0.57 0-0.04 0-0.08-0.01-0.12l1.2-2.26c0.12-0.15 0.12-0.32 0.04-0.45z"/><g fill="' + $background-color + '"><g fill-opacity="0.5"><circle cy="1.52" cx="13.69" r=".93"/><circle cy="1.52" cx="5.31" r=".93"/><circle cy="3.57" cx="7.54" r="1.86"/><circle cy="3.57" cx="11.46" r="1.86"/></g><ellipse cy="2.54" cx="7.72" rx=".74" ry=".29"/><ellipse cy="2.54" cx="11.64" rx=".74" ry=".29"/></g></svg>';
}

.portia-icon-spider {
    &:before {
        content: '';
        display: inline-block;
        height: 14px;
        width: 19px;
        text-align: center;
        vertical-align: middle;
        background: transparent url(portia-spider-icon('#777', ''+$sidebar-background-color)) no-repeat center;
    }

    .btn-primary & {
        &:before {
            background-image: url(portia-spider-icon(''+$btn-primary-color, ''+$btn-primary-bg));
        }
    }

    #side-bar h2 > & {
        &:before {
            background-image: url(portia-spider-icon(''+$list-heading-color, ''+$sidebar-background-color));
        }
    }
}

.portia-icon-number,
.portia-icon-regex,
.portia-icon-text {
    position: relative;

    &:before {
        display: inline-block;
        font-weight: bold;
        transform: scaleX(0.5);
        position: absolute;
        left: -1000%;
        right: -1000%;
        text-align: center;
    }

    &:after {
        content: ' ';
        white-space: pre;
    }
}

.portia-icon-number {
    width: 1.7ch;

    &:before {
        content: '123';
    }
}

.portia-icon-regex {
    width: 2.1ch;

    &:before {
        content: '\\d*';
        transform: scaleX(0.8);
    }
}

.portia-icon-text {
    width: 2.1ch;

    &:before {
        content: 'ABC';
    }
}

%combined-icon {
    position: relative;

    &:after {
        display: inline-block;
        position: absolute;
        width: 100%;
        text-align: center;
        vertical-align: middle;
    }
}

.portia-icon-safe-html {
    @extend .#{$fa-css-prefix};
    @extend %combined-icon;
    @extend .#{$fa-css-prefix}-code;

    &:before {
        display: inline-block;
        transform: scale(0.8);
    }

    &:after {
        content: $fa-var-circle-thin;
        left: 0;
        transform: scale(1.2);
    }
}

.portia-icon-selector {
    @extend .#{$fa-css-prefix};
    @extend %combined-icon;
    @extend .#{$fa-css-prefix}-circle;

    &:after {
        content: $fa-var-mouse-pointer;
        left: 1px;
        top: -1px;
        color: $fa-inverse;
        transform: scale(0.6);
    }
}

%subscript-icon {
    @extend %combined-icon;

    &:after {
        right: -3px;
        bottom: -3px;
        transform: scale(0.7);
        text-shadow: -1px -1px 1px $sidebar-background-color,
                       1px 1px 1px $sidebar-background-color,
                      -1px 1px 1px $sidebar-background-color,
                      1px -1px 1px $sidebar-background-color;
    }
}

.portia-icon-generated-url {
    @extend .#{$fa-css-prefix};
    @extend %subscript-icon;
    @extend .#{$fa-css-prefix}-globe;

    &:after {
        content: $fa-var-tasks;
    }
}

.portia-icon-feed-url {
    @extend .#{$fa-css-prefix};
    @extend %subscript-icon;
    @extend .#{$fa-css-prefix}-globe;

    &:after {
        content: $fa-var-rss;
    }
}
